<template>
  <z-publicFrame>
    <template v-slot:header>
      <el-button-group class="buttong">
        <el-button @click.native="handleAdd" size="small" type="primary" icon="el-icon-plus" v-if="!button.add">添加</el-button>
        <el-button @click.native="handlePatchDelete" size="small" type="danger" icon="el-icon-delete" v-if="!button.delete">删除</el-button>
        <el-button @click.native="handleSearch" size="small" type="warning" icon="el-icon-search">搜索</el-button>
        <el-button @click.native="handleRemoveSearch" size="small" icon="el-icon-scissors">清空</el-button>
      </el-button-group>
      <div class="search-form">
        <el-form size="mini" :inline="true" :model="search" class="demo-form-inline">
          <ZForm v-for="(item, index) in searchView" :key="index" :form="item" v-model="search[item.model]"></ZForm>
        </el-form>
      </div>
    </template>
    <template v-slot:container>

      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="600"
        @selection-change="handleSelectionChange"
        border
        stripe
      >
        <el-table-column
          type="selection"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          type="index"
          fixed="left"
          width="50">
        </el-table-column>
        <el-table-column
          min-width="130"
          v-for="(item, index) in tables"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        >
          <template slot-scope="scope">
            <el-image
              v-if="item.image === 1"
              style="width: 80px; height: 80px"
              :src="(scope.row[item.prop]?'/download?code=' + scope.row[item.prop]: null) "
              :preview-src-list="[(scope.row[item.prop]?'/download?code=' + scope.row[item.prop]: null)]"
              :fit="'fit'"></el-image>
            <template v-else>
              {{Boolean(item.formatter)?item.formatter(scope.row[item.prop]):scope.row[item.prop]}}
            </template>

          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="200"
          >
          <template slot-scope="scope">
            <el-button-group>
              <el-button v-if="!button.edit"
                @click.native.prevent="handleEdit(scope.row.code)"
                type="warning"
                size="mini"
                icon="el-icon-edit"
              >修改</el-button>
              <el-button
                v-if="!button.delete"
                @click.native.prevent="handleDelete(scope.row.code)"
                type="danger"
                size="mini"
                icon="el-icon-delete"
              >删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../../components/CrudTempalte/PublicFrame'
import { api, tables, searchView, button } from './config'

function init() {
  let search = {}
  for (let i = 0; i < searchView.length; i++) {
    search[searchView[i].model] = ''
  }

  return { search }
}

const { search } = init()
export default {
  name: 'List',
  components: {
    'z-publicFrame': PublicFrame
  },
  data() {
    return {
      api: {
        list: this.$api[api].list,
        add: this.$api[api].add,
        delete: this.$api[api].delete,
        edit: this.$api[api].edit,
        batchDelete: this.$api[api].batchDelete,
        fileTypeList: this.$api.fileType.list,
        fileServerList: this.$api.fileServer.list
      },
      delete: {
        codes: []
      },
      search,
      tableData: [],
      page: {
        current: 1,
        total: 0,
        size: 10
      },
      searchView,
      tables,
      button
    }
  },
  methods: {
    handleSelectionChange(v) {
      this.delete.codes = v.map(e => e.code)
    },
    handleAdd() {
      const hashs = document.location.hash.split('/')
      hashs[hashs.length - 1] = 'add'
      hashs[0] = ''
      const path = hashs.join('/')
      this.$router.push(path)
    },
    async handlePatchDelete() {
      if (this.delete.codes.length === 0) {
        this.$error('请选择你要删除的记录!')
        return
      }
      this.$confirm('正在删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await this.$http.post(this.api.batchDelete, this.delete.codes)
        if (!data) {
          return
        }
        if (data.data.status === 200) {
          this.handleList()
          this.$success(data.data.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    },
    handleSearch() {
      this.handleList()
    },
    handleSizeChange(val) {
      this.page.size = val
      this.handleList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.handleList()
    },
    handleList() {
      const pram = {}
      pram.current = this.page['current']
      pram.size = this.page['size']
      for (let item in this.search) {
        if (this.search[item]) {
          pram[item] = this.search[item]
        }
      }
      this.$httpTemplate({
        url: this.api.list,
        paras: this.$qs.stringify(pram)
      }, data => {
        for (let para in data.data.data) {
          if (data.data.data[para] instanceof Array) {
            this.tableData = data.data.data[para]
            this.handlePage(data.data.data.page)
            return
          }
        }
      }, 1)
    },
    handleDelete(code) {
      this.$confirm('正在删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpTemplate({ url: this.api.delete, paras: { code: code } }, data => this.handleList())
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleEdit(code) {
      const hashs = document.location.hash.split('/')
      hashs[hashs.length - 1] = 'edit'
      hashs[0] = ''
      const path = hashs.join('/')
      this.$router.push({
        path: path,
        query: {
          code: code
        }
      })
    },
    handlePage(page) {
      this.page.current = page.current
      this.page.total = page.total
    },
    handleRemoveSearch() {
      for (let item in this.search) {
        this.search[item] = ''
      }
    }

  },
  created() {
    this.handleList()
  }
}
</script>

<style lang="less" scoped>
  .container {
    height: 100%;
    margin-left: 40px;

    .el-table {
      margin-top: 30px;
    }
  }

  .buttong {
    margin: 10px 0;
  }

  .el-pagination {
    padding: 20px 40px;
    padding-left: 100px;
  }
</style>
